<template>
    <div class="box-tabbar" >
        <mt-tabbar v-model="message" fixed >
            <mt-tab-item id="Home"><i class="icon photofont photo-home1"></i>Home</mt-tab-item>
            <mt-tab-item id="Cart"><i class="icon photofont photo-shopping"></i>Cart</mt-tab-item>
            <mt-tab-item id="Search"><i class="icon photofont photo-sousuo9"></i>Search</mt-tab-item>
            <mt-tab-item id="Me"><i class="icon photofont photo-yonghu1"></i>Me</mt-tab-item>
        </mt-tabbar>
    </div>
</template>
<script>
import { Tabbar, TabItem } from 'mint-ui';
import { TabContainer, TabContainerItem } from 'mint-ui';
export default {
    name:'',
    props: {
        page: String,
        selected: String,
    },
    data(){
        return {
            message: this.selected
        }
    },
  watch: {
    message: function(val, oldVal) {
      // 这里就可以通过 val 的值变更来确定去向
      switch (val) {
        case "Home":
          this.$router.push("/");
          break;
        case "Cart":
          this.$router.push("/cart");
          break;
        case "Search":
          this.$router.push("/search");
          break;
        case "Me":
          this.$router.push("/me");
          break;
      }
    }
  }

}
</script>
<style>
/* .box-tabbar{position: fixed;bottom: 0;left: 0;width: 100%;background: #fff;z-index: 10;} */
.box-tabbar a{color:#000;}
.mint-tab-item-label{color: #999}
.mint-tab-item-label i {display:block;margin-bottom: 5px;font-weight: 900;}
.mint-tab-item.is-selected .mint-tab-item-label {color: #000;}
</style>
